<template>
  <div class="fan-container">
    <div class="fan-top">
      <div class="fan-top-item">
        <div class="item-num">0</div>

        <div class="item-title">今日新增</div>
      </div>
      <div class="fan-top-item">
        <div class="item-num">{{ fanList.length }}</div>

        <div class="item-title">我的粉丝</div>
      </div>
      <div class="fan-top-item">
        <div class="item-num">0</div>
        <div class="item-title">本月新增</div>
      </div>
    </div>
    <!-- <div class="table-tab">
      <div class="tab-left">粉丝信息</div>
      <div class="tab-right">
        <div class="tab-right-day">今日收益</div>
        <div class="tab-right-month">本月收益</div>
        <div class="tab-right-fans">粉丝数</div>
      </div>
    </div> -->

    <div class="list-container">
      <template v-if="listContainerHeight && listContainerHeight > 0">
        <scroll-view
          v-if="fanList.length > 0 && listContainerHeight"
          :scroll-y="true"
          :style="{ height: `${listContainerHeight}px` }"
          :scroll-top="scrollTop"
        >
          <div
            class="list-item-container"
            v-for="(item, index) in fanList"
            :key="index"
          >
            <div class="row-left">
              <div class="image">
                <image
                  v-if="item?.dyImage"
                  style="width: 40px; border-radius: 20px"
                  :src="item?.dyImage"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  style="width: 40px; border-radius: 20px"
                  src="../../assets/images/myImg/fontImage.png"
                  mode="widthFix"
                ></image>
              </div>
              <div class="left-text">
                <div class="left-text-name" v-if="item?.dyName">
                  {{ item?.dyName }}
                </div>
                <div class="left-text-name" v-else>抖音用户</div>

                <div class="left-text-time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="row-right">
              <!-- <div class="row-right-day">￥0.00</div>
              <div class="row-right-month">￥0.00</div>
              <div class="row-right-fans">0</div> -->
              等级: Lv{{ item.shareUserLevel }}
            </div>
          </div>

          <!-- <Loading
            :page="page"
            :total="last_page"
            :loadingFlag="loadingFlag"
            :tipFlag="tipFlag"
          ></Loading> -->
        </scroll-view>
        <!-- 空状态 -->
        <template v-if="fanList.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="fanList.length === 0 && loading">
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
        </template>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
import * as withdrawApi from "../../api/withdraw";
const listContainerHeight = ref(null);
const page = ref(1);
const size = ref(10);

const scrollTop = ref(0);
const loading = ref(false);
const fanList = ref([
 
]);

useDidShow(() => {
  setTimeout(() => {
    getListContainerHeight();
  }, 600);
});
onMounted(() => {
  loading.value = true;
  getList();
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});
const getList = async () => {
  let query = {
    page: page.value,
    size: size.value,
  };
  const res = await withdrawApi.list(query);
  console.log(res, "----");
  fanList.value = res.list;
};
const getListContainerHeight = () => {
  const query = Taro.createSelectorQuery()
    .select(".list-container")
    .boundingClientRect();
  query.selectViewport();
  query.exec(function (res) {
    if (res[0]) {
      listContainerHeight.value = res[0].height;
      console.log(res[0].height);
    }
  });
};
</script>
<style lang="scss">
.fan-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 40px;
  right: 0;
  //   padding: 25px;
  .fan-top {
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    align-items: center;
    .fan-top-item {
      padding: 25px;
      font-size: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-title {
        font-size: 20px;
        color: #858a99;
        margin-top: 15px;
      }
    }
  }
  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 25px;
    .list-item-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px;
      border-radius: 15px;
      background-color: #fff;
      margin-top: 15px;

      font-size: 24px;
      .row-left {
        display: flex;
        justify-content: center;
        align-items: center;

        .left-text {
          margin-left: 15px;
          .left-text-name {
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .left-text-time {
            color: #858a99;
            font-size: 20px;
            margin-top: 5px;
          }
        }
      }
      .row-right {
        display: flex;
        justify-content: space-around;
        align-items: center;
        // flex: 1;
        color: #858a99;
        font-size: 22px;
        .row-right-day {
          // margin-left: 60px;
        }
        .row-right-month {
          //   margin-left: 30px;
        }
        .row-right-fans {
          //   margin-left: 30px;
        }
      }
    }
  }
  .table-tab {
    font-size: 20px;
    color: #858a99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    text-align: center;

    .tab-left {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 2;
    }
    .tab-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex: 2;

      .tab-right-day {
        margin-left: 30px;
      }
      .tab-right-month {
        margin-left: 30px;
      }
      .tab-right-fans {
        margin-left: 30px;
      }
    }
  }
}
</style>
